<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            window对象
                - 在浏览器中，浏览器为我们提供了一个window对香港，可以直接访问
                - window对象代表的是浏览器窗口，通过该对象可以对浏览器窗口可以进行各种操作
                    除此之外widnow对象还负责存储JS中的内置对象和浏览器的宿主对象
                - window对象的属性可以通过window对象访问，也可以直接访问
        */

        // alert(window);

        /* 
            var 用来声明变量，作用和let下沟通，但是var不具有快作用域
                - 在全局域中使用 var 声明的变量，会作为window对象的属性保存
                - 使用 function 声明的函数，都会作为window的方法保存
        */
        

        /* 
            如果一个变量在局部作用域中，没有使用 var 也没有使用 let 声明，那么这个变量会作为 window 的属性保存

        */
       
        /*
            变量的提升
                - 在 JavaScript 中，var 声明会被提升到作用域的顶部，
                    是声明不是赋值，var a = 10;只有var a会被提升，a = 10；还在原处
        */

        /* 
            立即执行函数（IIFE）
                - 立即是一个匿名的函数，并它只会调用一次
                - 可以利用IIFE来创建一个一次性的函数作用域，避免变量冲突的问题
        */
        // (function () {
        //     let a = 10;
        //     console.log(a);
        // })();
        
        // (function () {
        //     let a = 11;
        //     console.log(a);
        // })();

        /* 
            this 
                - 函数在执行时，JS解释器每次都会传递一个隐含的参数
                - 这个参数就是this
                - this会指向一个对象
                    - this所指向的对象会根据函数调用方式不同而不同
                        1.以函数形式调用时,this 指向的是window对象
                        2.以方法的形式调用时，this 指向的是调用方法的对象

                - 通过 this 可以在方法中引用调用方法的对象
        */
        function fn() {
            // console.log(this);
            console.log("fn打印", this);
        }

        const obj = { name: "why", age: 18 };
        obj.test = fn;
        obj.test();

        const obj2 = { name: "kobe", test:fn};
        obj2.test();

        // window.fn();
        const obj3 = {
            name: "james",
            sayHello: function () {
                console.log(this.name);
            }
        }

        obj3.sayHello();

        const obj4 = {
            name: "nick",
            sayHello: function () {
                console.log(this);
            }
        }
        obj4.sayHello();
    </script>
</head>
<body>
    
</body>
</html>